import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
import { ref, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
// 组件数据懒加载的hook (好用的一些工具函数)
export function useLazyLoadData(laodFn: () => void) {
  const target = ref(null)
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    if (isIntersecting) {
      laodFn()
      stop()
    }
  }, {
    threshold: 0 // 默认是0.3 如果设置1 表示完全展示这块区域后才发送请求
  })
  return target
}

// 吸顶效果hook
export function useScroll() {
  // 1. 滚动距离大于等于78个px的时候，组件会在顶部固定定位  >78 加show类名
  // 2. 滚动距离小于78个px的时候，组件消失隐藏 <78 去show类名
  const y = ref(0)
  const onScroll = () => {
    const top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    // console.log('滑出的距离' + top)
    y.value = top
  }
  onMounted(() => {
    window.addEventListener('scroll', onScroll)
  })
  // 组件销毁的前 解绑对应组件的事件
  onBeforeUnmount(() => {
    window.removeEventListener('scroll', onScroll)
  })
  return { y }
}

// 倒计时Hook
export function useCountDown(startNum: number = 60) {
  const count = ref(0)
  const { pause, resume } = useIntervalFn(() => {
    count.value--
    if (count.value <= 0) pause()
  }, 1000, { immediate: false })
  // useIntervalFn　内部已经做了组件销毁　停止定时器这个操作了
  // onUnmounted(() => { pause() })
  const start = () => {
    count.value = startNum
    resume()
  }
  return {
    start,
    count
  }
}